<template>
  <div class="ostate">
    <router-link to="/home/order">
      <div class="dd">
        <p>我的订单</p>
        <ul>
          <li>
            <span class="iconfont">&#xe601;</span>
            <p>待付款</p>
            <span v-if="len1>0">{{len1}}</span>
          </li>
          <li>
            <span class="iconfont">&#xe63f;</span>
            <p>待发货</p>
            <span v-if="len2>0">{{len2}}</span>
          </li>
          <li>
            <span class="iconfont">&#xe645;</span>
            <p>待收货</p>
            <span v-if="len3>0">{{len3}}</span>
          </li>
          <li>
            <span class="iconfont">&#xe610;</span>
            <p>已完成</p>
          </li>
          <li>
            <span class="iconfont">&#xe63c;</span>
            <p>售后</p>
          </li>
        </ul>
      </div>
    </router-link>
  </div>
</template>
<style lang="scss" scoped>
.ostate {
    background-color: white;
    margin-top: -3px;
  a {
    display: block;
    .dd {
      > p {
        font-size: 16px;
        color: rgb(128, 128, 128);
        line-height: 40px;
        border-bottom: 1px solid #ccc;
        padding: 3px 15px;
      }
      ul {
        display: flex;
        justify-content: space-around;
        text-align: center;
        padding: 20px 0;
        li {
          position: relative;
          span {
            font-size: 25px;
            color: rgb(128, 128, 128);
          }
          span:nth-of-type(2) {
            width: 15px;
            height: 15px;
            font-size: 12px;
            top: -10px;
            right: 0;
            background-color: red;
            border-radius: 50%;
            color: white;
            position: absolute;
          }
          p {
            margin-top: 5px;
            font-size: 14px;
            color: rgb(128, 128, 128);
          }
        }
      }
    }
  }
}
</style>
<script>
import {mapState} from 'vuex'
export default {
  name: "ostate",
  data() {
    return {
      len1:0,
      len2:0,
      len3:0
    };
  },
  computed:{
      ...mapState(['dingdan'])
  },
  mounted(){
    for(let i=0;i<this.dingdan.length;i++){
        if(this.dingdan[i][0].fh=='待付款'){
            this.len1++
        } else if(this.dingdan[i][0].fh=='待发货'){
            this.len2++
        }
        else if(this.dingdan[i][0].fh=='待收货'){
            this.len3++
        }
    }
  },
};
</script>